AWS Route53でCloudFrontを設定しALBと連携する

Route53+ALBで構築されている環境にCloudFrontを追加する手順をまとめます。

#Amazon CloudFront

#Amazon Route 53

#Application Load Balancer（ALB）

serina

2024.10.28

SBJソリューション部のserinaです。

最近、CloudFrontを導入する作業を行ったので、やったことをまとめたいと思います。

構成図

AWS構成図

追加するAWSリソース

CloudFront
ACM
WAF
S3

前提条件

Route53でドメイン取得済み
VPC, EC2, ALB作成済み

手順

ざっくりとした流れとしては、CloudFrontの設定を全て完了させてから、Route53のAレコードにCloudFrontを紐づけます。

1. ACMを作成する

先にCloudFrontに紐づけるACMを作成します。

リージョンがバージニア北部になっていることを確認してから作成します。
Request-certificate_1

今回は推奨されているDNS検証で作成します。
Request-certificate_2

作成が完了しました。
Request-certificate_3

2. ログ格納用のS3を作成

続いて、CloudFrontのログ格納用のS3を作成します。
Create-bucket_1

ACLは有効にします。
Create-bucket_2

作成が完了しました。
Successfully-created-bucket

3. CloudFrontを作成する

紐づけるリソースは作成できたので、CloudFrontを作成します。

3-1. オリジンドメインとオリジン名を設定する

オリジンドメインに紐付けたいALBを選択します。
Create-distribution_1

名前にはRoute53に登録しているドメインを設定します。
Create-distribution_2

3-2. WAFを設定する

今回は、WAFを有効化します。
Create-distribution_3

3-3. ACMを紐づけて、代替ドメイン名(CNAME)を設定する

先ほど作成した証明書と代替ドメイン名(CNAME)を設定します。
Create-distribution_4

ここで、代替ドメイン名を設定しないとRoute53でAレコードにCloudFrontを設定しても名前解決ができずアクセスに失敗します。

❯ curl -I https://XXXXXX.link
curl: (35) LibreSSL/3.3.6: error:1404B410:SSL routines:ST_CONNECT:sslv3 alert handshake failure

3-4. ログ格納用のS3を紐づける

Standard Logging を ON にして、先ほど作成したS3バケットを設定します。

Set-log-bucket

4. Route53にCloudFrontを紐づける

Route53にCloudFrontのAレコードを設定します。
AレコードでAliasにチェックを入れて、CloudFrontを選択します。
Distribution domain name を入力します。

change-from-alb-to-cf

Aレコードを登録すると、数十秒したらSuccessに変わります。

5. Route53の疎通確認を行う

Route53とCloudFrontの設定が完了したので、疎通確認を行います。
ドメイン名でcurlコマンドを叩いて、200 OKが返ってきたら成功しています！

❯ curl -I https://XXXXXXX.link
HTTP/2 200 
content-type: text/html; charset=UTF-8
content-length: 705
date: Sat, 26 Oct 2024 04:29:30 GMT
server: Apache/2.4.62 (Amazon Linux)
last-modified: Tue, 22 Oct 2024 10:13:50 GMT
etag: "2c1-6250e069b4ff2"
accept-ranges: bytes
x-cache: Miss from cloudfront
via: 1.1 a26eXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.cloudfront.net (CloudFront)
x-amz-cf-pop: NRT20-P6
x-amz-cf-id: Pc45EXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX==

ちなみに、CloudFrontに証明書と代替ドメイン名を設定した後、あまりに早くコマンド叩くと証明書がないと言われてしまいます。
少し待ってからコマンドを叩くとうまくいきます。

❯ curl -I https://XXXXXXX.link
curl: (60) SSL: no alternative certificate subject name matches target host name 'XXXXXXX.link'
More details here: https://curl.se/docs/sslcerts.html

curl failed to verify the legitimacy of the server and therefore could not
establish a secure connection to it. To learn more about this situation and
how to fix it, please visit the web page mentioned above.